<template>
	<section>
		<div class="main main-video">
			<div class="box-top">
				<div class="box-player">
					<div class="player">
						<!-- <iframe class="iframe" scrolling="no" marginheight="-50px" width="550" height="550" src="http://www.pearvideo.com/video_1214724"></iframe> -->
						<!-- <video :src="detail.video_url" controls="controls">
							您的浏览器不支持 video 标签。
						</video> -->
						<video controls autoplay :src="detail.video_url">
							<source :src="detail.video_url" type="video/mp4">
							<source :src="detail.video_url" type="video/webm">
							<!-- Captions are optional -->
							<!-- <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default> -->
						</video>
					</div>
					<div class="info">
						<h3 class="video-title">{{ detail.title }}</h3>
						<div class="video-info">
							<span class="icon-bg icon-calendar">{{ detail.pub_time }}</span>
							<span class="icon-bg icon-user">{{ detail.author }}</span>
							<span class="icon-bg icon-eyes">{{ detail.pv_num }}</span>
							<span :class="detail.storeClass" @click="storeFn">{{ detail.store_num }}</span>
							<span :class="detail.good" @click="goodFn">{{ detail.good_num }}</span>
							<span :class="'icon-from icon-from-'+detail.pub_platform"></span>
						</div>
					</div>
				</div>
				<div class="share">
					<!-- 分享至：微信 微博 qq -->
					评论
				</div>
				<div class="box-comment">
					<div class="comment-input clearfix">
						<el-input v-model="comment" type="textarea" :maxlength="80" :rows="3" placeholder="发表评论..."></el-input>
						<div class="btn-div clear">
							<div class="emotion" ref="emotion">
								<div class="emotion-btn" @click="emotion = true">
									<img :src="`./static/img/arclist/0.gif`" alt="" />
								</div>
								<div class="emotion-ico" v-show="emotion">
									<ul class="emotion-ul clear">
										<li v-for="n in 75" :key="n" @click="emotionClick(n)"><img :src="`./static/img/arclist/${n}.gif`" alt="" /></li>
									</ul>
								</div>
							</div>
							<!-- (0/500) -->
							<div class="comment-submit">
								<span class="maxlength">{{ `(${comment.length}/80)` }}</span>
								<el-button class="btn" type="primary" size="small" @click="commentFn">发送</el-button>
							</div>
						</div>
					</div>
					<div class="comment-title">
						<svg viewBox="0 0 1089 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17.015625" height="16">
						<path d="M271.511282 359.563474c-37.454529 0-67.894845 31.461804-67.894845 70.346414s30.440317 70.414514 67.894845 70.414514 67.894845-31.529903 67.894846-70.414514-30.372218-70.414514-67.894846-70.414513m271.511282 0c-37.454529 0-67.894845 31.529903-67.894845 70.414513s30.372218 70.414514 67.894845 70.414514c37.454529 0 67.826746-31.529903 67.826747-70.414514S580.477093 359.563474 543.022564 359.563474m271.511283 0c-37.454529 0-67.894845 31.529903-67.894846 70.414513s30.440317 70.414514 67.894846 70.414514 67.894845-31.529903 67.894845-70.414514-30.440317-70.414514-67.894845-70.414513M950.323537 7.490906H135.789691C60.812534 7.490906 0 70.618811 0 148.388032v528.040753c0 77.769221 62.106418 149.477618 138.786053 149.477619h206.953295a36655.725582 36655.725582 0 0 0 185.229668 192.924871 16.479993 16.479993 0 0 0 24.038998 0s109.299124-123.94044 180.462728-192.924871h211.788334c76.611536 0 138.786053-71.708397 138.786053-149.477619V148.319933c0-77.769221-60.812534-140.829027-135.721592-140.829027m67.826747 668.86978c0 38.884611-32.687589 79.675997-70.959307 79.675997h-208.17908c-25.196683 0-47.941797 25.877674-47.941796 25.877674L544.92934 933.639247l-146.208859-151.656791s-27.78445-25.877674-51.687249-25.877674H138.786053c-38.271718 0-70.891208-40.859486-70.891208-79.675997V148.251834c0-38.95271 30.372218-70.414514 67.894846-70.414514h814.465747c37.454529 0 67.894845 31.461804 67.894846 70.414514v528.040753" fill="#ffffff" ></path>
						</svg>
						<span class="comment-total">{{comment_num}}</span>
					</div>
					<div class="comment-list">
						<div class="no-data" v-if="noData">暂无评论</div>
						<div v-if="!noData">
							<div class="comment-dl" v-for="item in commentList" :key="item.id">
								<div class="dt">
									<img :src="item.head_img !=''?imgBaseUrl+item.head_img:avatarPng" />
								</div>
								<div class="dd">
									<div class="name">
										{{ item.username }}
										<span class="time">{{ item.add_time }}</span>
									</div>
									<p class="text" v-html="item.comment"></p>
								</div>
							</div>
							<div class="loading-more">
								<span class="btn" @click="getComment" v-if="pageBtn">加载更多...</span>
								<span v-if="!pageBtn">没有更多了...</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</section>
</template>

<script>
import { videodetail, storefrontAdd, updategood, commentAdd, commentArticlecomment, imgBaseUrl } from '@/api';
import { utilStore, utilGood, utilFollow } from '@/util/util'
import { mapState, mapMutations } from 'vuex'
import avatarPng from '@/assets/img/avatar.png'
import '@/assets/js/plyr.css'
import plyr from '@/assets/js/plyr.js'

export default {
	data() {
		return {
			avatarPng,
			detail: {},
			aid: null,
			comment: '',
			commentList: [],
			comment_num: 0,
			page: 1,
			pageBtn: false,
			noData: true,
			star: 'icon-bg icon-store-o',
			thumbs: 'icon-bg icon-good-o',
			goodcan: true,
			imgBaseUrl,
			emotion: false
		}
	},
	computed: {
		...mapState([
			'userInfo',
			'login'
		]),
	},
	mounted() {
		this.videodetailFn();
		this.getComment();
		document.addEventListener('click', (e) => {
			if(this.$refs.emotion){
				if (!this.$refs.emotion.contains(e.target)) this.emotion = false;
			}
		})
	},
	methods: {
		...mapMutations([
			'DIALOG_LOGIN',
		]),
		emotionClick(n){
			this.comment += `[em_${n}]`;
		},
		replace_em(str){
			str = str.replace(/\</g,'&lt;');

			str = str.replace(/\>/g,'&gt;');

			str = str.replace(/\n/g,'<br/>');

			str = str.replace(/\[em_([0-9]*)\]/g,'<img src="./static/img/arclist/$1.gif" style="display:inline-block;width:24px;height:24px;vertical-align:middle;" />');

			return str;

		},
		storeFn(){
			if(this.login){
				let para = {
					aid: this.detail.aid,
					user_id: this.userInfo.user_id
				}
				storefrontAdd(para).then(res=> {
					if(res.data){
						this.detail.store_num++;
						this.detail.storeClass = 'icon-bg icon-store'
					}else{
						if(res.tologin){
							this.DIALOG_LOGIN();
						}else {
							if(res.msg === '已经收藏过此视频'){
								this.detail.storeClass = 'icon-bg icon-store'
							}
							this.$message.warning(res.msg);
						}
					}
				})
			}else{
				this.DIALOG_LOGIN();
			}
		},
		goodFn(){
			if(this.detail.goodcan){
				let para = {
					aid: this.detail.aid
				}
				updategood(para).then(res=> {
					if(res.data){
						this.detail.good_num++;
						this.detail.good = 'icon-bg icon-good';
						this.detail.goodcan = false;
					}else{
						this.$message.warning(res.msg);
					}
				})
			}
		},
		// 获取评论
		getComment(){
			let para = {
				aid: this.aid,
				page: this.page,
			}
			commentArticlecomment(para).then(res=> {
				if(res.data){
					let res_list = res.data.list;
					for(let i=0; i<res_list.length; i++){
						res_list[i].comment = this.replace_em(res_list[i].comment);
					}
					if(this.page===1){
						this.noData = false;
						this.commentList = res_list;
						this.comment_num = res.data.total;

						if(res.data.total>10){
							this.pageBtn = true;
						}else{
							this.pageBtn = false;
						}
					}else{
						this.commentList = this.commentList.concat(res_list);
					}

					if(this.page<res.data.totalpage){
						this.page++;
					}else{
						this.pageBtn = false;
					}
					
				}else{
					// this.$message.warning(res.msg);
				}
			})
		},
		toDou(n){
			return n<10?'0'+n:n;
		},
		// 评论
		commentFn() {
			if(this.login){

				if(this.comment == '' || this.comment == ' '){
					this.$message.warning('内容不能为空！');
					return
				}
				let para = {
					aid: this.aid,
					user_id: this.userInfo.user_id,
					uid: this.userInfo.user_id,
					comment: this.comment
				}
				commentAdd(para).then(res=> {
					if(res.data){
						this.$message.success(res.msg);
						this.noData = false;
						this.comment_num++;
						let nDate = new Date();
						let add_time = nDate.getFullYear()+'-'+(nDate.getMonth()+1)+'-'+nDate.getDate()+' '+nDate.getHours()+':'+this.toDou(nDate.getMinutes())+':'+this.toDou(nDate.getSeconds());

						let commentInfo = {
							username: this.userInfo.username,
							comment: this.replace_em(this.comment),
							add_time: add_time,
							head_img: this.userInfo.head_img,
						}
						this.commentList.unshift(commentInfo);
						this.comment = '';
					}else{
						if(res.tologin){
							this.DIALOG_LOGIN();
						}else {
							this.$message.warning(res.msg);
						}
					}
				})
			}else{
				this.DIALOG_LOGIN();
			}
		},
		// 加载页面数据
		videodetailFn(){
			this.aid = this.$route.params.aid;
			let para = {
				aid: this.aid,
				user_id: this.userInfo?this.userInfo.user_id:'',
			};
			videodetail(para).then(res => {
				if(res.data){
					let data = res.data;
					data.storeClass = data.store!=1?'icon-bg icon-store-o':'icon-bg icon-store';
					data.good = 'icon-bg icon-good-o';
					data.goodcan = true;
					this.detail = data;
					// console.log(data);
					plyr.setup();
					
				}else{
					this.$message.warning(res.msg);
				}
			});
		},
	},
}

</script>

<style scoped lang="scss">
	.main-video {
		width: 850px;
		padding-bottom: 20px;
	}
	.box-top {
		width: 850px;
	}
	.box-player {
		width: 850px;
		.player {
			width: 100%;
		}
		.info {
			.video-title {
				font-size: 23px;
				font-weight: normal;
				margin-top: 15px;
			}
			.video-info {
				height: 16px;
				font-size: 12px;
				line-height: 16px;
				margin: 15px 0;
				color: #999;

				.icon-calendar{
					background-position: 0 -64px;
					width: 150px;
				}
				.icon-eyes {
					background-position: 0 -80px;
					margin-right: 80px;
				}
				.icon-user {
					background-position: 0 -96px;
					width: 150px;
				}

				.icon-store-o {
					cursor: pointer;
					background-position: 0 -144px;
					margin-right: 80px;
				}
				.icon-good-o{
					cursor: pointer;
					background-position: 0 -128px;
					margin-right: 80px;
				}
				.icon-from {
					float: right;
				}
				.icon-store,.icon-store-o:hover{
					margin-right: 80px;
					background-position: 0 -48px;
				}
				.icon-good,.icon-good-o:hover {
					margin-right: 80px;
					background-position: 0 -16px;
				}
			}
			
		}
	}

	.box-comment {
		.comment-title {
			background:#f86254;
			padding: 10px;
			color:#fff;
			border-radius:5px 5px 0 0 ;
			overflow: hidden;
		}
		.comment-total {
			padding-left: 5px;
			color:#fff;
		}
		.comment-list {
			border: 1px solid #e8e8e8;
			border-top: none;
			background: #f9f9f9;
			padding:10px 10px 0;
			border-radius: 0 0 5px 5px;
			overflow: hidden;
			.comment-dl {
				display: flex;
				justify-content: space-between;
				background: #fff;
				margin-bottom: 10px;
				padding: 5px;
				.dt {
					width: 40px;
					height: 40px;
					overflow: hidden;
					border-radius: 20px;
					img {
						display: block;
						width: 40px;
						height: 40px;

					}
				}
				.dd {
					width: 770px;
					padding: 10px;
					.name {
						display: flex;
						justify-content: space-between;
						padding-bottom: 5px;
						.time {
							color:#999;
						}
					}
					.text{
						line-height: 24px;
					}
				}
				
			}
		}
	}
	.comment-input {
		margin: 15px 0;
		.textarea {
			border: 1px solid #e8e8e8;
			background: #f9f9f9;
			height: 68px;
			width: 100%;
			padding:10px;

		}
		.btn-div {
			margin-top: 5px;
			.comment-submit {
				float:right;
				.maxlength {
					line-height: 32px;
				}
				.btn {
					margin-left: 10px;
					float:right;
				}
			}
			
		}
	}

	.no-data {
		height: 60px;
		line-height: 50px;
		text-align: center;
	}
	.loading-more {
		height: 70px;
		padding-top: 10px;
		text-align: center;
		color: #999;
		.btn {
			cursor: pointer;
			padding: 5px 40px;
			border: 1px solid #666;
			color:#666;
			border-radius: 2px;
		}
	}
	.emotion{
		float:left;
		position: relative;
		.emotion-btn {
			position: absolute;
			left: 4px;
			width: 24px;
			height: 24px;
			cursor: pointer;
		}
		
		.emotion-ul {
			position: absolute;
			top: 26px;
			z-index:2;

			background: #fff;
			padding: 2px;
			border: 1px #dfe6f6 solid;
			width: 396px;
			li{
				float:left;
				width: 26px;
				height: 26px;
				cursor: pointer;
				border: 1px #fff solid;
			}
			li:hover {
				background: #dfe6f6;
				border: 1px #dfe6f6 solid;
			}
		}
	}
	.plyr audio, .plyr video{
		height: 478px;
	}
</style>